<template>
  <div class="container">
    <h1>AI大模型二次开发平台</h1>
    
    <!-- 导航菜单 -->
    <nav class="main-nav">
      <button @click="navigateTo('home')" :class="{ active: currentPage === 'home' }">{{ navItems.home.label }}</button>
      <button @click="navigateTo('models')" :class="{ active: currentPage === 'models' }">{{ navItems.models.label }}</button>
      <button @click="navigateTo('generate')" :class="{ active: currentPage === 'generate' }">{{ navItems.generate.label }}</button>
      <button @click="navigateTo('finetune')" :class="{ active: currentPage === 'finetune' }">{{ navItems.finetune.label }}</button>
    </nav>
    
    <!-- 页面内容区域 -->
    <div class="page-content">
      <HomeView v-if="currentPage === 'home'" />
      <ModelManagementView v-else-if="currentPage === 'models'" />
      <TextGenerationView v-else-if="currentPage === 'generate'" />
      <FineTuningView v-else-if="currentPage === 'finetune'" />
    </div>
  </div>
</template>

<script>
import { ref } from 'vue'
import HomeView from './views/HomeView.vue'
import ModelManagementView from './views/ModelManagementView.vue'
import TextGenerationView from './views/TextGenerationView.vue'
import FineTuningView from './views/FineTuningView.vue'

export default {
  name: 'App',
  components: {
    HomeView,
    ModelManagementView,
    TextGenerationView,
    FineTuningView
  },
  setup() {
    const currentPage = ref('home')
    
    const navItems = {
      home: { label: 'AI回答', key: 'home' },
      models: { label: '模型管理', key: 'models' },
      generate: { label: '文本生成', key: 'generate' },
      finetune: { label: '模型微调', key: 'finetune' }
    }
    
    const navigateTo = (pageKey) => {
      currentPage.value = pageKey
      // 更新URL哈希，方便用户可以刷新页面后保持在同一页面
      window.location.hash = pageKey
    }
    
    // 初始化时检查URL哈希，恢复用户之前的页面
    const initPage = () => {
      const hash = window.location.hash.slice(1)
      if (navItems[hash]) {
        currentPage.value = hash
      }
    }
    
    // 初始化页面
    initPage()
    
    return {
      currentPage,
      navItems,
      navigateTo
    }
  }
}
</script>

<style scoped>
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem;
}

h1 {
  text-align: center;
  margin-bottom: 2rem;
  color: #333;
}

.main-nav {
  display: flex;
  gap: 1rem;
  margin-bottom: 2rem;
  padding: 1rem;
  background-color: #f0f0f0;
  border-radius: 8px;
}

.main-nav button {
  padding: 0.5rem 1rem;
  text-decoration: none;
  color: #333;
  border-radius: 4px;
  transition: background-color 0.3s;
  border: none;
  cursor: pointer;
  background-color: transparent;
  font-size: 1rem;
}

.main-nav button:hover {
  background-color: #ddd;
}

.main-nav button.active {
  background-color: #4CAF50;
  color: white;
}

.page-content {
  padding: 1rem;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
</style>